import React, { PureComponent } from 'react'
import { connect } from 'dva'
import { Card, Form } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import BaseList from './List'
import AOEForm from './AOEForm'
import styles from './Index.less'

// 连接组件和store
@connect(state => ({
  parameters: state.parameters,
}))
@Form.create()
export default class Parameters extends PureComponent {
  // 组件加载完成后加载数据
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({
      type: 'parameters/listParameters',
    })
  }

  // 渲染界面
  render() {
    const { dispatch, loading } = this.props
    const { list, pagination, selectedRowKeys, modalType, currentItem } = this.props.parameters

    const listProps = {
      dispatch,
      loading,
      list,
      pagination,
      selectedRowKeys,
    }
    const modalProps = {
      item: modalType === 'create' ? currentItem : currentItem,
      modalType,
      dispatch,
      maskClosable: false,
      title: `${modalType === 'create' ? '新增' : '编辑'}`,
    }
    return (
      <PageHeaderWrapper title="系统参数设置">
        <Card>
          <div className={styles.goodsInfoList}>
            <BaseList {...listProps} />
          </div>
        </Card>
        {/* 新增窗口 */}
        {modalType !== '' && <AOEForm {...modalProps} />}
      </PageHeaderWrapper>
    )
  }
}
